<template>
  <a-list size="large" rowKey="id" :loading="loading" itemLayout="vertical" :data-source="data" class="list_item">
    <a-list-item :key="index" slot="renderItem" slot-scope="item, index">
      <div class="list_item_user">
        <div class="list_item_title">
          <div class="list_item_title_title">{{ item.title }}</div>
          <div v-if="!isAssist" class="list_item_title_reward">+{{ item.rewardAmount }}贡献值</div>
          <div
            v-if="showStatus"
            class="list_item_title_status"
            :style="isAssist && item.status !== '11' ? '999' : item.status | statusColorFilter(item.status)"
          >
            {{ isAssist && item.status !== '11' ? '999' : item.status | statusTextFilter(item.status) }}
          </div>
        </div>
        <div class="list_item_content">{{ item.content }}</div>
        <div class="list_item_userInfo">
          <img
            alt="example"
            class="list_item_userInfo_image"
            src="~@/assets/image/account/Community/communityUser.png"
          />
          <span class="list_item_userInfo_name">{{ item.name }}</span>
          <span class="list_item_userInfo_time">{{ item.createTime || ' ' }}</span>
        </div>
      </div>
      <div v-if="item.reply" class="list_item_service">
        <div class="list_item_content">{{ item.reply }}</div>
        <div class="list_item_userInfo">
          <img
            alt="example"
            class="list_item_userInfo_image"
            src="~@/assets/image/account/Community/customerService.png"
          />
          <span class="list_item_userInfo_name">{{ item.customerServiceName }}</span>
          <span class="list_item_userInfo_time">{{ item.replyTime || ' ' }}</span>
        </div>
      </div>
    </a-list-item>
    <div v-if="data.length > 0" slot="footer" style="width: 760px; text-align: center; margin-top: 16px;">
      <!-- <a-button :loading="loadingMore" @click="loadMore"></a-button> -->
      <div :loading="loadingMore" class="loadingBtn" @click="loadMore">
        <span class="loadingBtn_font">加载更多</span>
        <img alt="example" class="loadingBtn_img" src="~@/assets/image/account/Community/loadingMore.png" />
      </div>
    </div>
  </a-list>
</template>

<script>
import { statusSymbol } from '@/utils/constant'
export default {
  name: 'CommunitySuggest',
  components: {},
  filters: {
    statusTextFilter(type) {
      return statusSymbol[type].text
    },
    statusColorFilter(type) {
      return { color: statusSymbol[type].color }
    }
  },
  props: {
    isAssist: {
      type: Boolean,
      default: false
    },
    getData: {
      type: Function,
      default: null
    },
    showStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      data: [],
      loading: true,
      loadingMore: false
    }
  },
  mounted() {
    this.getList()
  },
  methods: {
    getList() {
      this.getData(cab => {
        cab
          .then(res => {
            this.loading = false
            this.data = res.data
            console.log(res.data, '22222222222222')
          })
          .catch(err => this.requestFailed(err))
      })
    },
    loadMore() {
      this.loadingMore = true
      this.getData(cab => {
        cab
          .then(res => {
            this.loading = false
            this.loadingMore = false
            this.data = this.data.concat(res.data)
          })
          .catch(err => this.requestFailed(err))
      })
    },
    requestFailed(err) {
      this.loading = false
      this.$notification['error']({
        message: '错误',
        description: ((err.response || {}).data || {}).message || '请求出现错误，请稍后再试',
        duration: 4
      })
    }
  }
}
</script>

<style lang="less" scoped>
.list_item {
  font-weight: normal;
  font-stretch: normal;
  letter-spacing: 0px;
  /deep/.ant-card-head {
    border-bottom: none;
  }
  /deep/.ant-list-item {
    width: 760px;
    margin-bottom: 11px;
    padding: 0;
    border-radius: 2px;
    border: solid 1px #e1e5ee;
  }
  /deep/.ant-list-item-meta-description {
    font-size: 12px;
    line-height: 20px;
    color: #5c5c5c;
  }
  .list_item_title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    .list_item_title_title {
      flex: auto;
      -ms-flex: auto;
      -moz-flex: auto;
      width: 480px;
      height: 16px;
      font-size: 16px;
      line-height: 16px;
      color: #333333;
    }
    .list_item_title_status {
      flex: none;
      -ms-flex: none;
      -moz-flex: none;
      width: 70px;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
      text-align: right;
    }
    .list_item_title_reward {
      flex: auto;
      -ms-flex: auto;
      -moz-flex: auto;
      height: 14px;
      font-size: 14px;
      line-height: 14px;
      color: #fa7321;
      text-align: right;
    }
  }
  .list_item_content {
    font-size: 12px;
    line-height: 20px;
    color: #333333;
    margin-bottom: 10px;
  }
  .list_item_userInfo {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .list_item_userInfo_image {
      width: 28px;
      height: 28px;
      margin-right: 10px;
    }
    .list_item_userInfo_name {
      font-size: 14px;
      line-height: 14px;
      color: #333333;
      margin-right: 20px;
    }
    .list_item_userInfo_time {
      font-size: 12px;
      line-height: 12px;
      color: #85899f;
    }
  }
  .list_item_service {
    background-color: #f6f8fd;
  }
  .list_item_user {
    padding: 20px 30px 10px 30px;
  }
  .list_item_service {
    padding: 17px 30px 10px 30px;
  }
  .loadingBtn {
    height: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 14px;
    color: #33b0ed;
    .loadingBtn_font {
      margin-right: 9px;
    }
    .loadingBtn_img {
      width: 12px;
      height: 12px;
    }
  }
  .loadingBtn:hover {
    cursor: pointer;
  }
}
</style>
